
<template>
  <!-- 预警报警记录 -->
  <div class="alarm-record-wrap">
    <div class="com-form">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="预警报警原因">
          <el-input v-model="form.alarmReason" placeholder="预警报警原因" @keyup.enter.native="onSubmit" />
        </el-form-item>
        <el-form-item label="设备类型">
          <el-select v-model="form.deviceType" placeholder="设备类型" @change="onSubmit">
            <el-option
              v-for="(val,index) in devType"
              :key="index"
              :label="val.enumCvalue"
              :value="val.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="报警时间">
          <el-date-picker
            v-model="alarmTime"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            value-format="timestamp"
            @change="onSubmit"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="com-select" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="com-select" @click="exportExcel">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table border :resizable="false" :data="alarmData" style="width: 100%">
      <el-table-column prop="deviceTypeFont" label="设备类型" />
      <el-table-column prop="alarmTypeFont" label="报警类型" />
      <el-table-column prop="deviceName" label="设备名称" />
      <el-table-column prop="alarmReason" label="报警原因" />
      <el-table-column prop="createDate" label="报警时间" />
    </el-table>
    <div class="dis-cen com-pagination">
      <el-pagination
        :current-page="form.pageNum"
        :page-sizes="[10, 20, 40, 60]"
        :page-size="form.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="currentChange"
      />
      <!-- <el-pagination
        :page-size="10"
        :pager-count="7"
        layout="prev, pager, next"
        :total="total"
        @current-change="currentChange"
      />-->
    </div>
  </div>
</template>

<script>
import { queryAllByPage } from '@/api/alarmInfo'
import { handleByDeviceType, handleAlarmType } from '@/utils/handle.js'
export default {
  name: 'AlarmRecord',
  data() {
    return {
      form: {
        alarmReason: '',
        deviceType: '',
        pageNum: 1,
        pageSize: 10
      },
      // 总条数
      total: 100,
      // 选择的日期数组
      alarmTime: '',
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      alarmData: [],
      devType: []
    }
  },
  created() {
    this.onSubmit()
    this.devType = this.$store.state.device.device_type
  },
  methods: {
    // 当前页码改变触发
    currentChange(n) {
      this.form.pageNum = n
      this.onSubmit(true)
    },
    // 当前size变动触发
    handleSizeChange(size) {
      this.form.pageSize = size
      this.onSubmit(true)
    },
    onSubmit(off) {
      off ? '' : (this.form.pageNum = 1)
      if (this.alarmTime && this.alarmTime.length) {
        this.form.startTime = this.alarmTime[0]
        this.form.endTime = this.alarmTime[1]
      } else {
        try {
          delete this.form.startTime
          delete this.form.endTime
        } catch (e) {
          console.log(e)
        }
      }
      queryAllByPage(this.form)
        .then(res => {
          this.alarmData = res.data.list.map(val => {
            val.deviceTypeFont = handleByDeviceType(val.deviceType)
            val.alarmTypeFont = handleAlarmType(val.alarmType)
            return val
          })
          this.total = res.data.total
        })
        .catch(error => {
          console.log(error)
        })
    },
    exportExcel() {
      this.$bus.emit('downloadExcel', { url: '/alarm/exportExcel', query: this.form })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/com.scss";
.alarm-record-wrap,
.table-wrap {
  width: 100%;
}
</style>
